<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>监控用户输入的内容</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<div id="app">
	<h3>敏感词：
		<span v-for="sen in sensitive">{{sen}}、</span>
	</h3>
	<textarea @input="count2" :maxlength="num_max" v-model="text" name="" id="" cols="80" rows="10">{{text}}</textarea>
	<p>你输入了：{{text}}</p>
	<p>还能输入：{{num}}</p>
	<p>{{msg}}  {{sens_str}}</p>
</div>

</body>
<script>
const HelloVueApp = {
	data(){
		return{
			//用户输入的内容
			text:'',
			//最大字数
			num_max:100,
			//还可以输入的字数
			num:100,
			//敏感词
			sensitive:[
				'tmd', 'nt', 'sb', 'sex', '六合彩', '约拍', '吸毒', '一夜情',
			],
			//敏感词提醒
			msg: '',
			//包含的敏感词集
			sens:[],
			//包含的敏感词
			sens_str:'',
		}
	},
	methods:{
		count2:function(event){
			this.num = this.num_max - this.text.length;
		}
	},
	//监听属性，监听器
	watch:{
		text:function(value){
			this.msg = '';
			this.sens = [];
			this.sens_str = '';
			var THIS = this;
			this.sensitive.forEach(function(words,index){
				if(value.indexOf(words) !== -1){
					THIS.msg = '发现敏感词：';
					if(THIS.sens.indexOf(THIS.sensitive[index]) === -1){
						//敏感词集中没有新发现的敏感词，要加入进来
						THIS.sens.push(THIS.sensitive[index]);
					}
					THIS.sens_str = THIS.sens.join('，');
				}
			})
		}
	}
}
var vm = Vue.createApp(HelloVueApp).mount('#app');
</script>

</html>